<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load Data while Scrolling Page Down with jQuery and PHP</title>
<style type="text/css">
body{
	font-family:'Georgia',Times New Roman, Times, serif;
	font-size:18px;
}
.swap{
	margin:0 auto;
	width:800px
}
.message_box{
	border:dashed 1px #48B1D9; 
	padding:5px ;
	margin-bottom:50px
}
.number{
	float:right; 
	background-color:#48B1D9; 
	color:#000; 
	font-weight:bold;
}
.footer{
	padding:100px 0 100px 0;
	background:#09F
}
</style>
<script type="text/javascript" src="../static/shop/js/jquerylib.js"></script>
<script type="text/javascript">
$(function(){
	function last_msg_funtion() { 
		var ID = $(".message_box:last").attr("id");
		
		$('div#last_msg_loader').html('Loading...');
		
		$.post("load_data.php?action=get&last_msg_id="+ID,
	
		function(data){
			if (data != "") {
				$(".message_box:last").after(data); 
			}
			$('div#last_msg_loader').empty();
		});
	}; 

	$(window).scroll(function(){
		if ($(window).scrollTop() == $(document).height() - $(window).height()){
			last_msg_funtion();
		}
	});
});
</script>
</head>

<body>
<div class="swap" id="content">
<?php for ($i=0; $i<=10; $i++){ ?>
    <div id="id_<?php echo $i; ?>" class="message_box">
    	<div class="number"><?php echo $i; ?></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas.</p>
    </div>
<?php } ?>
	<div id="last_msg_loader"></div>
    <div style="clear:both"></div>
    <div class="footer">Footer</div>
</div>
</body>
</html>
